<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link href="/tailwind.css" rel="stylesheet" />
  </head>

  <body>
    <div class="text-sm text-gray-900">
      <nav class="flex items-center px-8 py-4 bg-gray-900 justify-between">
        <div class="text-white flex items-center space-x-4">
          <a class="w-6 fill-current hover:text-gray-200" href="#">
            <svg
              class="w-6"
              aria-hidden="true"
              viewBox="0 0 16 16"
              version="1.1"
              width="32"
              data-view-component="true"
            >
              <path
                d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"
              ></path>
            </svg>
          </a>
          <div class="relative">
            <input
              type="text"
              class="rounded bg-gray-900 border border-gray-600 placeholder-gray-400 w-72 px-3 py-1"
              placeholder="Search or jump to..."
            />
            <div class="absolute top-0 right-0 flex items-center h-full">
              <div
                class="border border-gray-600 rounded text-xs text-gray-400 px-2 mr-2"
              >
                /
              </div>
            </div>
          </div>

          <ul class="flex items-center font-semibold space-x-4">
            <li>
              <a href="#" class="hover:text-gray-400">Pull requests</a>
            </li>
            <li>
              <a href="#" class="hover:text-gray-400">Issues</a>
            </li>
            <li>
              <a href="#" class="hover:text-gray-400">Marketplace</a>
            </li>
            <li>
              <a href="#" class="hover:text-gray-400">Explore</a>
            </li>
          </ul>
        </div>

        <div class="text-white flex items-center space-x-4">
          <a href="#" class="relative hover:text-gray-400">
            <svg
              class="w-5 fill-current"
              aria-hidden="true"
              viewBox="0 0 16 16"
              version="1.1"
              data-view-component="true"
            >
              <path
                d="M8 16a2 2 0 0 0 1.985-1.75c.017-.137-.097-.25-.235-.25h-3.5c-.138 0-.252.113-.235.25A2 2 0 0 0 8 16ZM3 5a5 5 0 0 1 10 0v2.947c0 .05.015.098.042.139l1.703 2.555A1.519 1.519 0 0 1 13.482 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947Zm5-3.5A3.5 3.5 0 0 0 4.5 5v2.947c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01l.001.006c0 .002.002.004.004.006l.006.004.007.001h10.964l.007-.001.006-.004.004-.006.001-.007a.017.017 0 0 0-.003-.01l-1.703-2.554a1.745 1.745 0 0 1-.294-.97V5A3.5 3.5 0 0 0 8 1.5Z"
              ></path>
              <span
                class="bg-blue-400 rounded-full w-2 h-2 absolute top-0 right-0"
              ></span>
            </svg>
          </a>

          <a href="#" class="flex items-center hover:text-gray-400">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="2.5"
              stroke="currentColor"
              class="w-6 h-6 font-bold"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M12 4.5v15m7.5-7.5h-15"
              />
            </svg>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="2"
              stroke="currentColor"
              class="w-3 h-3"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M19.5 8.25l-7.5 7.5-7.5-7.5"
              />
            </svg>
          </a>

          <a href="#" class="flex items-center hover:text-gray-400">
            <span class="rounded-full w-6 h-6 bg-blue-600"></span>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="2"
              stroke="currentColor"
              class="w-3 h-3"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M19.5 8.25l-7.5 7.5-7.5-7.5"
              />
            </svg>
          </a>
        </div>
      </nav>
      <!-- end navbar -->

      <div
        class="repo-stats bg-gray-100 flex items-center justify-between px-8 py-4"
      >
        <div class="flex">
          <svg
            aria-hidden="true"
            viewBox="0 0 16 16"
            version="1.1"
            data-view-component="true"
            class="w-4 fill-current text-gray-500"
          >
            <path
              d="M2 2.5A2.5 2.5 0 0 1 4.5 0h8.75a.75.75 0 0 1 .75.75v12.5a.75.75 0 0 1-.75.75h-2.5a.75.75 0 0 1 0-1.5h1.75v-2h-8a1 1 0 0 0-.714 1.7.75.75 0 1 1-1.072 1.05A2.495 2.495 0 0 1 2 11.5Zm10.5-1h-8a1 1 0 0 0-1 1v6.708A2.486 2.486 0 0 1 4.5 9h8ZM5 12.25a.25.25 0 0 1 .25-.25h3.5a.25.25 0 0 1 .25.25v3.25a.25.25 0 0 1-.4.2l-1.45-1.087a.249.249 0 0 0-.3 0L5.4 15.7a.25.25 0 0 1-.4-.2Z"
            ></path>
          </svg>
          <div class="flex items-center text-xl ml-2">
            <a href="#" class="text-blue-600 hover:underline">tailwindlab</a>
            <span class="mx-1">/</span>
            <a href="#" class="text-blue-600 hover:underline font-semibold"
              >tailwindcss</a
            >
            <div
              class="flex items-center p-2 h-4 bg-gray-100 rounded-xl border border-gray-300 text-gray-600 text-xs ml-2"
            >
              Public
            </div>
          </div>
        </div>
        <div class="flex space-x-2">
          <div class="watch-btn flex text-xs shadow-sm h-7">
            <button
              class="border border-gray-300 rounded-lg rounded-r-none px-3 py-1 flex items-center space-x-2"
            >
              <svg
                class="w-4 h-4"
                aria-hidden="true"
                viewBox="0 0 16 16"
                version="1.1"
                data-view-component="true"
              >
                <path
                  d="M8 2c1.981 0 3.671.992 4.933 2.078 1.27 1.091 2.187 2.345 2.637 3.023a1.62 1.62 0 0 1 0 1.798c-.45.678-1.367 1.932-2.637 3.023C11.67 13.008 9.981 14 8 14c-1.981 0-3.671-.992-4.933-2.078C1.797 10.83.88 9.576.43 8.898a1.62 1.62 0 0 1 0-1.798c.45-.677 1.367-1.931 2.637-3.022C4.33 2.992 6.019 2 8 2ZM1.679 7.932a.12.12 0 0 0 0 .136c.411.622 1.241 1.75 2.366 2.717C5.176 11.758 6.527 12.5 8 12.5c1.473 0 2.825-.742 3.955-1.715 1.124-.967 1.954-2.096 2.366-2.717a.12.12 0 0 0 0-.136c-.412-.621-1.242-1.75-2.366-2.717C10.824 4.242 9.473 3.5 8 3.5c-1.473 0-2.825.742-3.955 1.715-1.124.967-1.954 2.096-2.366 2.717ZM8 10a2 2 0 1 1-.001-3.999A2 2 0 0 1 8 10Z"
                ></path>
              </svg>
              <span class="font-semibold">Watch</span>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke-width="2"
                stroke="currentColor"
                class="w-3 h-3"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M19.5 8.25l-7.5 7.5-7.5-7.5"
                />
              </svg>
            </button>
            <a
              href="#"
              class="flex items-center border border-gray-300 rounded-lg rounded-l-none px-3 py-1 border-l-0 font-semibold hover:text-blue-400 bg-white"
              >548</a
            >
          </div>

          <div class="start-btn flex text-xs shadow-sm h-7">
            <button
              class="border border-gray-300 rounded-lg rounded-r-none px-3 py-1 flex items-center space-x-2"
            >
              <svg
                class="w-4 h-4"
                aria-hidden="true"
                viewBox="0 0 16 16"
                version="1.1"
                data-view-component="true"
              >
                <path
                  d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Zm0 2.445L6.615 5.5a.75.75 0 0 1-.564.41l-3.097.45 2.24 2.184a.75.75 0 0 1 .216.664l-.528 3.084 2.769-1.456a.75.75 0 0 1 .698 0l2.77 1.456-.53-3.084a.75.75 0 0 1 .216-.664l2.24-2.183-3.096-.45a.75.75 0 0 1-.564-.41L8 2.694Z"
                ></path>
              </svg>
              <span class="font-semibold">Star</span>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke-width="2"
                stroke="currentColor"
                class="w-3 h-3"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M19.5 8.25l-7.5 7.5-7.5-7.5"
                />
              </svg>
            </button>
            <a
              href="#"
              class="flex items-center border border-gray-300 rounded-lg rounded-l-none px-3 py-1 border-l-0 font-semibold hover:text-blue-400 bg-white"
              >47.9k</a
            >
          </div>

          <div class="fork-btn flex text-xs shadow-sm h-7">
            <button
              class="border border-gray-300 rounded-lg rounded-r-none px-3 py-1 flex items-center"
            >
              <svg
                class="w-4 h-4"
                aria-hidden="true"
                viewBox="0 0 16 16"
                version="1.1"
                data-view-component="true"
              >
                <path
                  d="M5 5.372v.878c0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75v-.878a2.25 2.25 0 1 1 1.5 0v.878a2.25 2.25 0 0 1-2.25 2.25h-1.5v2.128a2.251 2.251 0 1 1-1.5 0V8.5h-1.5A2.25 2.25 0 0 1 3.5 6.25v-.878a2.25 2.25 0 1 1 1.5 0ZM5 3.25a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Zm6.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm-3 8.75a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Z"
                ></path>
              </svg>
              <span class="font-semibold">Star</span>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke-width="2"
                stroke="currentColor"
                class="w-3 h-3"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M19.5 8.25l-7.5 7.5-7.5-7.5"
                />
              </svg>
            </button>
            <a
              href="#"
              class="flex items-center border border-gray-300 rounded-lg rounded-l-none px-3 py-1 border-l-0 font-semibold hover:text-blue-400 bg-white"
              >47.9k</a
            >
          </div>
        </div>
      </div>
      <!-- end repo stats -->

      <ul
        class="repo-nav bg-gray-100 border-b border-gray-300 flex items-center px-8 pt-4"
      >
        <li class="font-semibold">
          <a
            href="#"
            class="flex items-center border-b-2 border-red-500 px-4 pb-3"
          >
            <svg
              class="w-4 h-4"
              aria-hidden="true"
              viewBox="0 0 16 16"
              version="1.1"
              data-view-component="true"
            >
              <path
                d="m11.28 3.22 4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L13.94 8l-3.72-3.72a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215Zm-6.56 0a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L2.06 8l3.72 3.72a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L.47 8.53a.75.75 0 0 1 0-1.06Z"
              ></path>
            </svg>
            <span class="font-semibold ml-2">Code</span>
          </a>
        </li>
        <li>
          <a
            href="#"
            class="flex items-center border-b-2 border-gray-100 px-4 pb-3 hover:border-gray-300 text-gray-700"
          >
            <svg
              class="w-4 fill-current"
              aria-hidden="true"
              viewBox="0 0 16 16"
              version="1.1"
              data-view-component="true"
            >
              <path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path>
              <path
                d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"
              ></path>
            </svg>
            <span class="ml-2">Issues</span>
            <div class="flex items-center bg-gray-200 rounded-lg px-2 ml-2">
              38
            </div>
          </a>
        </li>
        <li>
          <a
            href="#"
            class="flex items-center border-b-2 border-gray-100 px-4 pb-3 hover:border-gray-300 text-gray-700"
          >
            <svg
              class="w-4 h-4 fill-current"
              aria-hidden="true"
              viewBox="0 0 16 16"
              version="1.1"
              data-view-component="true"
            >
              <path
                d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25Zm5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354ZM3.75 2.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm0 9.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm8.25.75a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Z"
              ></path>
            </svg>
            <span class="ml-2">Pull requests</span>
            <div class="flex items-center bg-gray-200 rounded-lg px-2 ml-2">
              18
            </div>
          </a>
        </li>
        <li>
          <a
            href="#"
            class="flex items-center border-b-2 border-gray-100 px-4 pb-3 hover:border-gray-300 text-gray-700"
          >
            <svg
              class="w-4 h-4 fill-current"
              aria-hidden="true"
              viewBox="0 0 16 16"
              version="1.1"
              data-view-component="true"
            >
              <path
                d="M1.75 1h8.5c.966 0 1.75.784 1.75 1.75v5.5A1.75 1.75 0 0 1 10.25 10H7.061l-2.574 2.573A1.458 1.458 0 0 1 2 11.543V10h-.25A1.75 1.75 0 0 1 0 8.25v-5.5C0 1.784.784 1 1.75 1ZM1.5 2.75v5.5c0 .138.112.25.25.25h1a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h3.5a.25.25 0 0 0 .25-.25v-5.5a.25.25 0 0 0-.25-.25h-8.5a.25.25 0 0 0-.25.25Zm13 2a.25.25 0 0 0-.25-.25h-.5a.75.75 0 0 1 0-1.5h.5c.966 0 1.75.784 1.75 1.75v5.5A1.75 1.75 0 0 1 14.25 12H14v1.543a1.458 1.458 0 0 1-2.487 1.03L9.22 12.28a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215l2.22 2.22v-2.19a.75.75 0 0 1 .75-.75h1a.25.25 0 0 0 .25-.25Z"
              ></path>
            </svg>
            <span class="ml-2">Discussions</span>
          </a>
        </li>
        <li>
          <a
            href="#"
            class="flex items-center border-b-2 border-gray-100 px-4 pb-3 hover:border-gray-300 text-gray-700"
          >
            <svg
              class="w-4 h-4 fill-current"
              aria-hidden="true"
              viewBox="0 0 16 16"
              version="1.1"
              data-view-component="true"
            >
              <path
                d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Zm4.879-2.773 4.264 2.559a.25.25 0 0 1 0 .428l-4.264 2.559A.25.25 0 0 1 6 10.559V5.442a.25.25 0 0 1 .379-.215Z"
              ></path>
            </svg>
            <span class="ml-2">Action</span>
          </a>
        </li>
        <li>
          <a
            href="#"
            class="flex items-center border-b-2 border-gray-100 px-4 pb-3 hover:border-gray-300 text-gray-700"
          >
            <svg
              class="w-4 h-4 fill-current"
              aria-hidden="true"
              viewBox="0 0 16 16"
              version="1.1"
              data-view-component="true"
            >
              <path
                d="M7.467.133a1.748 1.748 0 0 1 1.066 0l5.25 1.68A1.75 1.75 0 0 1 15 3.48V7c0 1.566-.32 3.182-1.303 4.682-.983 1.498-2.585 2.813-5.032 3.855a1.697 1.697 0 0 1-1.33 0c-2.447-1.042-4.049-2.357-5.032-3.855C1.32 10.182 1 8.566 1 7V3.48a1.75 1.75 0 0 1 1.217-1.667Zm.61 1.429a.25.25 0 0 0-.153 0l-5.25 1.68a.25.25 0 0 0-.174.238V7c0 1.358.275 2.666 1.057 3.86.784 1.194 2.121 2.34 4.366 3.297a.196.196 0 0 0 .154 0c2.245-.956 3.582-2.104 4.366-3.298C13.225 9.666 13.5 8.36 13.5 7V3.48a.251.251 0 0 0-.174-.237l-5.25-1.68ZM8.75 4.75v3a.75.75 0 0 1-1.5 0v-3a.75.75 0 0 1 1.5 0ZM9 10.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
              ></path>
            </svg>
            <span class="ml-2">Security</span>
          </a>
        </li>
        <li>
          <a
            href="#"
            class="flex items-center border-b-2 border-gray-100 px-4 pb-3 hover:border-gray-300 text-gray-700"
          >
            <svg
              class="w-4 h-4 fill-current"
              aria-hidden="true"
              viewBox="0 0 16 16"
              version="1.1"
              data-view-component="true"
            >
              <path
                d="M1.5 1.75V13.5h13.75a.75.75 0 0 1 0 1.5H.75a.75.75 0 0 1-.75-.75V1.75a.75.75 0 0 1 1.5 0Zm14.28 2.53-5.25 5.25a.75.75 0 0 1-1.06 0L7 7.06 4.28 9.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.25-3.25a.75.75 0 0 1 1.06 0L10 7.94l4.72-4.72a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042Z"
              ></path>
            </svg>
            <span class="ml-2">Insights</span>
          </a>
        </li>
      </ul>
      <!-- end repo-nav -->

      <div class="container mx-auto my-8 px-4 flex">
        <div class="file-explorer w-3/4 mr-8">
          <div class="branch-navigation flex items-center justify-between">
            <div class="flex items-center space-x-1">
              <button
                class="border border-gray-300 bg-gray-100 rounded-md px-4 py-1 hover:border-gray-200 flex items-center space-x-2"
              >
                <svg
                  class="w-4 h-4"
                  text="gray"
                  aria-hidden="true"
                  viewBox="0 0 16 16"
                  version="1.1"
                  data-view-component="true"
                >
                  <path
                    d="M9.5 3.25a2.25 2.25 0 1 1 3 2.122V6A2.5 2.5 0 0 1 10 8.5H6a1 1 0 0 0-1 1v1.128a2.251 2.251 0 1 1-1.5 0V5.372a2.25 2.25 0 1 1 1.5 0v1.836A2.493 2.493 0 0 1 6 7h4a1 1 0 0 0 1-1v-.628A2.25 2.25 0 0 1 9.5 3.25Zm-6 0a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Zm8.25-.75a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5ZM4.25 12a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Z"
                  ></path>
                </svg>
                <span class="font-medium">master</span>
                <span
                  class="border-transparent border-t-black border-4 translate-y-0.5"
                ></span>
              </button>
              <a
                href="#"
                class="flex items-center px-4 hover:text-blue-400 space-x-1"
              >
                <svg
                  class="w-4 h-4"
                  text="gray"
                  aria-hidden="true"
                  viewBox="0 0 16 16"
                  version="1.1"
                  data-view-component="true"
                >
                  <path
                    d="M9.5 3.25a2.25 2.25 0 1 1 3 2.122V6A2.5 2.5 0 0 1 10 8.5H6a1 1 0 0 0-1 1v1.128a2.251 2.251 0 1 1-1.5 0V5.372a2.25 2.25 0 1 1 1.5 0v1.836A2.493 2.493 0 0 1 6 7h4a1 1 0 0 0 1-1v-.628A2.25 2.25 0 0 1 9.5 3.25Zm-6 0a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Zm8.25-.75a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5ZM4.25 12a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Z"
                  ></path>
                </svg>
                <span class="font-medium">14 branches</span>
              </a>
              <a
                href="#"
                class="flex items-center px-4 hover:text-blue-400 space-x-1"
              >
                <svg
                  aria-hidden="true"
                  viewBox="0 0 16 16"
                  version="1.1"
                  data-view-component="true"
                  class="w-4 h-4 fill-current"
                >
                  <path
                    fill-rule="evenodd"
                    d="M2.5 7.775V2.75a.25.25 0 01.25-.25h5.025a.25.25 0 01.177.073l6.25 6.25a.25.25 0 010 .354l-5.025 5.025a.25.25 0 01-.354 0l-6.25-6.25a.25.25 0 01-.073-.177zm-1.5 0V2.75C1 1.784 1.784 1 2.75 1h5.025c.464 0 .91.184 1.238.513l6.25 6.25a1.75 1.75 0 010 2.474l-5.026 5.026a1.75 1.75 0 01-2.474 0l-6.25-6.25A1.75 1.75 0 011 7.775zM6 5a1 1 0 100 2 1 1 0 000-2z"
                  ></path>
                </svg>
                <span class="font-medium">159 tags</span>
              </a>
            </div>

            <div class="flex items-center space-x-2">
              <button
                class="bg-gray-100 border border-gray-300 rounded px-4 py-1 hover:bg-gray-200"
              >
                Go to file
              </button>
              <button
                class="bg-green-600 border border-b-gray-300 text-white rounded px-4 py-1 flex items-center space-x-2 hover:bg-green-700"
              >
                <svg
                  class="w-4 h-4 fill-current"
                  aria-hidden="true"
                  viewBox="0 0 16 16"
                  version="1.1"
                  data-view-component="true"
                >
                  <path
                    d="m11.28 3.22 4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L13.94 8l-3.72-3.72a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215Zm-6.56 0a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L2.06 8l3.72 3.72a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L.47 8.53a.75.75 0 0 1 0-1.06Z"
                  ></path>
                </svg>
                <span>Code</span>
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke-width="2"
                  stroke="currentColor"
                  class="w-3 h-3"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M19.5 8.25l-7.5 7.5-7.5-7.5"
                  ></path>
                </svg>
              </button>
            </div>
          </div>
          <!-- end branch navigation -->

          <div
            class="commits-container bg-gray-100 rounded-md rounded-b-none border border-gray-300 border-b-0 flex items-center justify-between p-4 mt-5"
          >
            <div class="flex items-center space-x-2">
              <div class="rounded-full bg-blue-600 w-6 h-6"></div>
              <a
                href="#"
                class="font-semibold hover:underline hover:text-blue-500"
                >RobinMalfait</a
              >
              <a href="#" class="hover:underline hover:text-blue-500"
                >Revert prepare of v3.3</a
              >
            </div>

            <div class="">
              <ul class="flex items-center space-x-2">
                <li class="flex items-center space-x-1">
                  <svg
                    class="w-4 h-4 text-green-600 fill-current"
                    aria-label="32 / 32 checks OK"
                    role="img"
                    viewBox="0 0 16 16"
                    version="1.1"
                    data-view-component="true"
                  >
                    <path
                      d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
                    ></path>
                  </svg>
                  <a
                    href="#"
                    class="hover:underline text-xs hover:text-blue-400"
                    >fbbba6f</a
                  >
                </li>
                <li>
                  <a href="#" class="hover:underline hover:text-blue-400"
                    >19 hours ago</a
                  >
                </li>
                <li>
                  <a
                    href="#"
                    class="flex items-center space-x-1 cursor-pointer hover:text-blue-400"
                  >
                    <svg
                      class="w-4 h-4 fill-current"
                      text="gray"
                      aria-hidden="true"
                      viewBox="0 0 16 16"
                      version="1.1"
                      data-view-component="true"
                    >
                      <path
                        d="m.427 1.927 1.215 1.215a8.002 8.002 0 1 1-1.6 5.685.75.75 0 1 1 1.493-.154 6.5 6.5 0 1 0 1.18-4.458l1.358 1.358A.25.25 0 0 1 3.896 6H.25A.25.25 0 0 1 0 5.75V2.104a.25.25 0 0 1 .427-.177ZM7.75 4a.75.75 0 0 1 .75.75v2.992l2.028.812a.75.75 0 0 1-.557 1.392l-2.5-1A.751.751 0 0 1 7 8.25v-3.5A.75.75 0 0 1 7.75 4Z"
                      ></path>
                    </svg>
                    <strong>5,124</strong>
                    <span>commits</span>
                  </a>
                </li>
              </ul>
            </div>
          </div>
          <!-- end conmits-container -->

          <div
            class="file-explorer-body rounded rounded-t-none border border-gray-300 divide-y divide-gray-300"
          >
            <div class="flex justify-between items-center px-4 py-2">
              <div class="w-4/12 flex items-center">
                <svg
                  class="w-4 h-4 text-blue-400 fill-current"
                  aria-label="Directory"
                  aria-hidden="true"
                  viewBox="0 0 16 16"
                  version="1.1"
                  data-view-component="true"
                >
                  <path
                    d="M1.75 1A1.75 1.75 0 0 0 0 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0 0 16 13.25v-8.5A1.75 1.75 0 0 0 14.25 3H7.5a.25.25 0 0 1-.2-.1l-.9-1.2C6.07 1.26 5.55 1 5 1H1.75Z"
                  ></path>
                </svg>
                <a
                  href="#"
                  class="hover:underline hover:text-blue-600 ml-3 cursor-pointer"
                  >.github</a
                >
              </div>
              <div class="w-6/12 text-gray-500 text-sm truncate">
                <a class="hover:underline hover:text-blue-600 cursor-pointer"
                  >Don't move unknown pseudo-elements to the end of selectors
                  (#10962)</a
                >
              </div>
              <div class="w-2/12 text-right">
                <span class="text-gray-600">yesterday</span>
              </div>
            </div>

            <div class="flex justify-between items-center px-4 py-2">
              <div class="w-4/12 flex items-center">
                <svg
                  class="w-4 h-4 text-gray-600 fill-current"
                  aria-label="File"
                  aria-hidden="true"
                  viewBox="0 0 16 16"
                  version="1.1"
                  data-view-component="true"
                >
                  <path
                    d="M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"
                  ></path>
                </svg>
                <a
                  href="#"
                  class="hover:underline hover:text-blue-600 ml-3 cursor-pointer"
                  >.editorconfig</a
                >
              </div>
              <div class="w-6/12 text-gray-500 text-sm truncate pr-20">
                <a class="hover:underline hover:text-blue-600 cursor-pointer"
                  >Convert new stuff to use ES6 modules</a
                >
              </div>
              <div class="w-2/12 flex justify-end">
                <span class="text-gray-600">6 years ago</span>
              </div>
            </div>
          </div>
          <!-- end file-explorer-body -->

          <div class="file-content mt-5">
            <div
              class="border border-gray-300 rounded rounded-b-none flex items-center px-4 py-4 space-x-2"
            >
              <svg
                class="w-4 h-4"
                aria-hidden="true"
                viewBox="0 0 16 16"
                version="1.1"
                data-view-component="true"
              >
                <path
                  d="M5.75 2.5h8.5a.75.75 0 0 1 0 1.5h-8.5a.75.75 0 0 1 0-1.5Zm0 5h8.5a.75.75 0 0 1 0 1.5h-8.5a.75.75 0 0 1 0-1.5Zm0 5h8.5a.75.75 0 0 1 0 1.5h-8.5a.75.75 0 0 1 0-1.5ZM2 14a1 1 0 1 1 0-2 1 1 0 0 1 0 2Zm1-6a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM2 4a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"
                ></path>
              </svg>
              <span class="font-semibold">README.md</span>
            </div>
            <div
              class="border border-t-0 border-gray-300 rounded rounded-t-none px-8 py-8 space-y-6"
            >
              <p class="mx-auto">
                <img
                  class="w-72"
                  src="https://raw.githubusercontent.com/tailwindlabs/tailwindcss/HEAD/.github/logo-light.svg"
                  alt="Tailwind CSS"
                />
              </p>
              <p class="">
                A utility-first CSS framework for rapidly building custom user
                interfaces.
              </p>
            </div>
          </div>
          <!-- end file-content -->
        </div>
        <!-- end file-explorer -->

        <div class="side-bar w-1/4 divide-y divide-gray-300 space-y-6">
          <div class="about">
            <h4 class="font-semibold">About</h4>
            <p class="mt-4">
              A utility-first CSS framework for rapid UI development.
            </p>
            <div class="flex items-center space-x-4 mt-4">
              <svg
                class="w-4 h-4"
                aria-hidden="true"
                viewBox="0 0 16 16"
                version="1.1"
                data-view-component="true"
              >
                <path
                  d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"
                ></path>
              </svg>
              <a
                href="#"
                class="cursor-pointer text-blue-500 font-semibold hover:underline"
                >tailwindcss.com/</a
              >
            </div>
            <div class="flex items-center flex-wrap space-x-1 mt-4 text-xs">
              <a
                class="rounded-full bg-blue-100 text-blue-600 px-2 py-1 mb-1 cursor-pointer hover:bg-blue-600 hover:text-white"
                >css</a
              >
              <a
                class="rounded-full bg-blue-100 text-blue-600 px-2 py-1 mb-1 cursor-pointer hover:bg-blue-600 hover:text-white"
                >postcss</a
              >
              <a
                class="rounded-full bg-blue-100 text-blue-600 px-2 py-1 mb-1 cursor-pointer hover:bg-blue-600 hover:text-white"
                >responsive</a
              >
              <a
                class="rounded-full bg-blue-100 text-blue-600 px-2 py-1 mb-1 cursor-pointer hover:bg-blue-600 hover:text-white"
                >css-framework</a
              >
              <a
                class="rounded-full bg-blue-100 text-blue-600 px-2 py-1 mb-1 cursor-pointer hover:bg-blue-600 hover:text-white"
                >functional-css</a
              >
              <a
                class="rounded-full bg-blue-100 text-blue-600 px-2 py-1 mb-1 cursor-pointer hover:bg-blue-600 hover:text-white"
                >utility-classes</a
              >
              <a
                class="rounded-full bg-blue-100 text-blue-600 px-2 py-1 mb-1 cursor-pointer hover:bg-blue-600 hover:text-white"
                >tailwindcss</a
              >
            </div>
            <!-- end tags -->
            <div class="flex items-center mt-6">
              <ul class="space-y-3 text-gray-500 text-sm">
                <li>
                  <a href="" class="flex items-center space-x-4 group">
                    <svg
                      class="w-4 h-4 fill-current group-hover:text-blue-600"
                      aria-hidden="true"
                      viewBox="0 0 16 16"
                      version="1.1"
                      data-view-component="true"
                    >
                      <path
                        d="M0 1.75A.75.75 0 0 1 .75 1h4.253c1.227 0 2.317.59 3 1.501A3.743 3.743 0 0 1 11.006 1h4.245a.75.75 0 0 1 .75.75v10.5a.75.75 0 0 1-.75.75h-4.507a2.25 2.25 0 0 0-1.591.659l-.622.621a.75.75 0 0 1-1.06 0l-.622-.621A2.25 2.25 0 0 0 5.258 13H.75a.75.75 0 0 1-.75-.75Zm7.251 10.324.004-5.073-.002-2.253A2.25 2.25 0 0 0 5.003 2.5H1.5v9h3.757a3.75 3.75 0 0 1 1.994.574ZM8.755 4.75l-.004 7.322a3.752 3.752 0 0 1 1.992-.572H14.5v-9h-3.495a2.25 2.25 0 0 0-2.25 2.25Z"
                      ></path>
                    </svg>
                    <span class="group-hover:text-blue-600">Readme</span>
                  </a>
                </li>
                <li>
                  <a href="" class="flex items-center space-x-4 group">
                    <svg
                      class="w-4 h-4 fill-current group-hover:text-blue-600"
                      aria-hidden="true"
                      viewBox="0 0 16 16"
                      version="1.1"
                      data-view-component="true"
                    >
                      <path
                        d="M8.75.75V2h.985c.304 0 .603.08.867.231l1.29.736c.038.022.08.033.124.033h2.234a.75.75 0 0 1 0 1.5h-.427l2.111 4.692a.75.75 0 0 1-.154.838l-.53-.53.529.531-.001.002-.002.002-.006.006-.006.005-.01.01-.045.04c-.21.176-.441.327-.686.45C14.556 10.78 13.88 11 13 11a4.498 4.498 0 0 1-2.023-.454 3.544 3.544 0 0 1-.686-.45l-.045-.04-.016-.015-.006-.006-.004-.004v-.001a.75.75 0 0 1-.154-.838L12.178 4.5h-.162c-.305 0-.604-.079-.868-.231l-1.29-.736a.245.245 0 0 0-.124-.033H8.75V13h2.5a.75.75 0 0 1 0 1.5h-6.5a.75.75 0 0 1 0-1.5h2.5V3.5h-.984a.245.245 0 0 0-.124.033l-1.289.737c-.265.15-.564.23-.869.23h-.162l2.112 4.692a.75.75 0 0 1-.154.838l-.53-.53.529.531-.001.002-.002.002-.006.006-.016.015-.045.04c-.21.176-.441.327-.686.45C4.556 10.78 3.88 11 3 11a4.498 4.498 0 0 1-2.023-.454 3.544 3.544 0 0 1-.686-.45l-.045-.04-.016-.015-.006-.006-.004-.004v-.001a.75.75 0 0 1-.154-.838L2.178 4.5H1.75a.75.75 0 0 1 0-1.5h2.234a.249.249 0 0 0 .125-.033l1.288-.737c.265-.15.564-.23.869-.23h.984V.75a.75.75 0 0 1 1.5 0Zm2.945 8.477c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L13 6.327Zm-10 0c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L3 6.327Z"
                      ></path>
                    </svg>
                    <span class="group-hover:text-blue-600">MIT License</span>
                  </a>
                </li>
                <li>
                  <a href="" class="flex items-center space-x-4 group">
                    <svg
                      class="w-4 h-4 fill-current group-hover:text-blue-600"
                      aria-hidden="true"
                      viewBox="0 0 16 16"
                      version="1.1"
                      data-view-component="true"
                    >
                      <path
                        d="M8.048 2.241c.964-.709 2.079-1.238 3.325-1.241a4.616 4.616 0 0 1 3.282 1.355c.41.408.757.86.996 1.428.238.568.348 1.206.347 1.968 0 2.193-1.505 4.254-3.081 5.862-1.496 1.526-3.213 2.796-4.249 3.563l-.22.163a.749.749 0 0 1-.895 0l-.221-.163c-1.036-.767-2.753-2.037-4.249-3.563C1.51 10.008.007 7.952.002 5.762a4.614 4.614 0 0 1 1.353-3.407C3.123.585 6.223.537 8.048 2.24Zm-1.153.983c-1.25-1.033-3.321-.967-4.48.191a3.115 3.115 0 0 0-.913 2.335c0 1.556 1.109 3.24 2.652 4.813C5.463 11.898 6.96 13.032 8 13.805c.353-.262.758-.565 1.191-.905l-1.326-1.223a.75.75 0 0 1 1.018-1.102l1.48 1.366c.328-.281.659-.577.984-.887L9.99 9.802a.75.75 0 1 1 1.019-1.103l1.384 1.28c.295-.329.566-.661.81-.995L12.92 8.7l-1.167-1.168c-.674-.671-1.78-.664-2.474.03-.268.269-.538.537-.802.797-.893.882-2.319.843-3.185-.032-.346-.35-.693-.697-1.043-1.047a.75.75 0 0 1-.04-1.016c.162-.191.336-.401.52-.623.62-.748 1.356-1.637 2.166-2.417Zm7.112 4.442c.313-.65.491-1.293.491-1.916v-.001c0-.614-.088-1.045-.23-1.385-.143-.339-.357-.633-.673-.949a3.111 3.111 0 0 0-2.218-.915c-1.092.003-2.165.627-3.226 1.602-.823.755-1.554 1.637-2.228 2.45l-.127.154.562.566a.755.755 0 0 0 1.066.02l.794-.79c1.258-1.258 3.312-1.31 4.594-.032.396.394.792.791 1.173 1.173Z"
                      ></path>
                    </svg>
                    <span class="group-hover:text-blue-600"
                      >Code of conduct</span
                    >
                  </a>
                </li>
                <li>
                  <a href="" class="flex items-center space-x-4 group">
                    <svg
                      class="w-4 h-4 fill-current group-hover:text-blue-600"
                      aria-hidden="true"
                      viewBox="0 0 16 16"
                      version="1.1"
                      data-view-component="true"
                    >
                      <path
                        d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Zm0 2.445L6.615 5.5a.75.75 0 0 1-.564.41l-3.097.45 2.24 2.184a.75.75 0 0 1 .216.664l-.528 3.084 2.769-1.456a.75.75 0 0 1 .698 0l2.77 1.456-.53-3.084a.75.75 0 0 1 .216-.664l2.24-2.183-3.096-.45a.75.75 0 0 1-.564-.41L8 2.694Z"
                      ></path>
                    </svg>
                    <span class="group-hover:text-blue-600"
                      ><strong>67K</strong> stars</span
                    >
                  </a>
                </li>
                <li>
                  <a href="" class="flex items-center space-x-4 group">
                    <svg
                      class="w-4 h-4 fill-current group-hover:text-blue-600"
                      aria-hidden="true"
                      viewBox="0 0 16 16"
                      version="1.1"
                      data-view-component="true"
                    >
                      <path
                        d="M8 2c1.981 0 3.671.992 4.933 2.078 1.27 1.091 2.187 2.345 2.637 3.023a1.62 1.62 0 0 1 0 1.798c-.45.678-1.367 1.932-2.637 3.023C11.67 13.008 9.981 14 8 14c-1.981 0-3.671-.992-4.933-2.078C1.797 10.83.88 9.576.43 8.898a1.62 1.62 0 0 1 0-1.798c.45-.677 1.367-1.931 2.637-3.022C4.33 2.992 6.019 2 8 2ZM1.679 7.932a.12.12 0 0 0 0 .136c.411.622 1.241 1.75 2.366 2.717C5.176 11.758 6.527 12.5 8 12.5c1.473 0 2.825-.742 3.955-1.715 1.124-.967 1.954-2.096 2.366-2.717a.12.12 0 0 0 0-.136c-.412-.621-1.242-1.75-2.366-2.717C10.824 4.242 9.473 3.5 8 3.5c-1.473 0-2.825.742-3.955 1.715-1.124.967-1.954 2.096-2.366 2.717ZM8 10a2 2 0 1 1-.001-3.999A2 2 0 0 1 8 10Z"
                      ></path>
                    </svg>
                    <span class="group-hover:text-blue-600"
                      ><strong>596</strong> watching</span
                    >
                  </a>
                </li>
                <li>
                  <a href="" class="flex items-center space-x-4 group">
                    <svg
                      class="w-4 h-4 fill-current group-hover:text-blue-600"
                      aria-hidden="true"
                      viewBox="0 0 16 16"
                      version="1.1"
                      data-view-component="true"
                    >
                      <path
                        d="M5 5.372v.878c0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75v-.878a2.25 2.25 0 1 1 1.5 0v.878a2.25 2.25 0 0 1-2.25 2.25h-1.5v2.128a2.251 2.251 0 1 1-1.5 0V8.5h-1.5A2.25 2.25 0 0 1 3.5 6.25v-.878a2.25 2.25 0 1 1 1.5 0ZM5 3.25a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Zm6.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm-3 8.75a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Z"
                      ></path>
                    </svg>
                    <span class="group-hover:text-blue-600"
                      ><strong>3.5k</strong> forks</span
                    >
                  </a>
                </li>
              </ul>
            </div>
          </div>
          <!-- end about -->

          <div class="releases pt-6">
            <div class="flex items-center">
              <h1 class="font-semibold">Release</h1>
              <span class="px-1 py-0.5 rounded-full bg-gray-200 ml-2 text-xs"
                >211</span
              >
            </div>

            <div class="mt-4 flex items-center space-x-2">
              <svg
                class="w-4 h-4 text-green-600 fill-current"
                aria-hidden="true"
                viewBox="0 0 16 16"
                version="1.1"
                data-view-component="true"
              >
                <path
                  d="M1 7.775V2.75C1 1.784 1.784 1 2.75 1h5.025c.464 0 .91.184 1.238.513l6.25 6.25a1.75 1.75 0 0 1 0 2.474l-5.026 5.026a1.75 1.75 0 0 1-2.474 0l-6.25-6.25A1.752 1.752 0 0 1 1 7.775Zm1.5 0c0 .066.026.13.073.177l6.25 6.25a.25.25 0 0 0 .354 0l5.025-5.025a.25.25 0 0 0 0-.354l-6.25-6.25a.25.25 0 0 0-.177-.073H2.75a.25.25 0 0 0-.25.25ZM6 5a1 1 0 1 1 0 2 1 1 0 0 1 0-2Z"
                ></path>
              </svg>
              <span class="font-semibold">v3.3.1</span>
              <div
                class="rounded-full px-1 py-0.5 border border-green-600 text-green-600 text-xs"
              >
                Latest
              </div>
            </div>
            <div class="text-xs text-gray-500 pl-6">last week</div>
            <div class="mt-4">
              <a
                href="#"
                class="text-blue-600 hover:underline cursor-pointer text-xs"
                >+ 210 release</a
              >
            </div>
          </div>
          <!-- end releases -->

          <div class="packages pt-6">
            <h1 class="font-semibold">Packages</h1>
            <p class="text-xs text-gray-500 mt-4">No packages published</p>
          </div>
          <!-- end packages -->

          <div class="used-by pt-6">
            <div class="flex items-center">
              <h1 class="font-semibold">Used by</h1>
              <span class="px-1 py-0.5 rounded-full bg-gray-200 ml-2 text-xs"
                >4m</span
              >
            </div>

            <div class="mt-4 flex items-center space-x-4">
              <ul class="flex items-center -space-x-2">
                <li>
                  <div
                    class="rounded-full w-10 h-10 bg-blue-600 border-2 border-white"
                  ></div>
                </li>
                <li>
                  <div
                    class="rounded-full w-10 h-10 bg-blue-600 border-2 border-white"
                  ></div>
                </li>
                <li>
                  <div
                    class="rounded-full w-10 h-10 bg-blue-600 border-2 border-white"
                  ></div>
                </li>
                <li>
                  <div
                    class="rounded-full w-10 h-10 bg-blue-600 border-2 border-white"
                  ></div>
                </li>
                <li>
                  <div
                    class="rounded-full w-10 h-10 bg-blue-600 border-2 border-white"
                  ></div>
                </li>
                <li>
                  <div
                    class="rounded-full w-10 h-10 bg-blue-600 border-2 border-white"
                  ></div>
                </li>
              </ul>
              <a
                href="#"
                class="text-blue-600 cursor-pointer hover:underline text-xs"
                >+ 3,9774,373</a
              >
            </div>
          </div>
          <!-- end used-by -->

          <div class="contributors pt-6">
            <div class="flex items-center">
              <h1 class="font-semibold">Contributors</h1>
              <span class="px-1 py-0.5 rounded-full bg-gray-200 ml-2 text-xs"
                >264</span
              >
            </div>

            <div class="mt-4 flex items-center space-x-4">
              <ul class="flex items-center flex-wrap">
                <li>
                  <div
                    class="rounded-full w-10 h-10 bg-blue-600 border-2 border-white"
                  ></div>
                </li>
                <li>
                  <div
                    class="rounded-full w-10 h-10 bg-blue-600 border-2 border-white"
                  ></div>
                </li>
                <li>
                  <div
                    class="rounded-full w-10 h-10 bg-blue-600 border-2 border-white"
                  ></div>
                </li>
                <li>
                  <div
                    class="rounded-full w-10 h-10 bg-blue-600 border-2 border-white"
                  ></div>
                </li>
                <li>
                  <div
                    class="rounded-full w-10 h-10 bg-blue-600 border-2 border-white"
                  ></div>
                </li>
                <li>
                  <div
                    class="rounded-full w-10 h-10 bg-blue-600 border-2 border-white"
                  ></div>
                </li>
                <li>
                  <div
                    class="rounded-full w-10 h-10 bg-blue-600 border-2 border-white"
                  ></div>
                </li>
                <li>
                  <div
                    class="rounded-full w-10 h-10 bg-blue-600 border-2 border-white"
                  ></div>
                </li>
                <li>
                  <div
                    class="rounded-full w-10 h-10 bg-blue-600 border-2 border-white"
                  ></div>
                </li>
                <li>
                  <div
                    class="rounded-full w-10 h-10 bg-blue-600 border-2 border-white"
                  ></div>
                </li>
                <li>
                  <div
                    class="rounded-full w-10 h-10 bg-blue-600 border-2 border-white"
                  ></div>
                </li>
              </ul>
            </div>

            <div class="mt-4">
              <a
                href="#"
                class="text-blue-600 text-sm cursor-pointer hover:underline"
                >+ 253 contributors</a
              >
            </div>
          </div>
          <!-- end contributors -->

          <div class="languages pt-6">
            <div class="flex items-center">
              <h1 class="font-semibold">Languages</h1>
            </div>

            <div class="flex items-center mt-4">
              <div
                class="h-2 bg-red-600 rounded-full rounded-r-none"
                style="flex-grow: 97"
              ></div>
              <div class="h-2 bg-white" style="width: 1px"></div>
              <div class="h-2 bg-yellow-400" style="flex-grow: 2.5"></div>
              <div class="h-2 bg-white" style="width: 1px"></div>
              <div class="h-2 bg-purple-700" style="flex-grow: 0.3"></div>
              <div class="h-2 bg-white" style="width: 1px"></div>
              <div class="h-2 bg-amber-600" style="flex-grow: 0.1"></div>
              <div class="h-2 bg-white" style="width: 1px"></div>
              <div class="h-2 bg-blue-600" style="flex-grow: 0.1"></div>
              <div class="h-2 bg-white" style="width: 1px"></div>
              <div
                class="h-2 bg-green-500 rounded-l-none"
                style="flex-grow: 0.1"
              ></div>
            </div>

            <div class="mt-4 text-xs w-3/4">
              <ul class="flex items-center flex-wrap">
                <li class="flex items-center mr-4 mb-2">
                  <div class="w-2 h-2 rounded-full bg-red-600"></div>
                  <span class="ml-2 font-medium">HTML</span>
                  <span class="ml-1 text-gray-500">97%</span>
                </li>
                <li class="flex items-center mr-4 mb-2">
                  <div class="w-2 h-2 rounded-full bg-yellow-400"></div>
                  <span class="ml-2 font-medium">JavaScript</span>
                  <span class="ml-1 text-gray-500">2.5%</span>
                </li>
                <li class="flex items-center mr-4 mb-2">
                  <div class="w-2 h-2 rounded-full bg-purple-700"></div>
                  <span class="ml-2 font-medium">CSS</span>
                  <span class="ml-1 text-gray-500">0.3%</span>
                </li>
                <li class="flex items-center mr-4 mb-2">
                  <div class="w-2 h-2 rounded-full bg-amber-600"></div>
                  <span class="ml-2 font-medium">Rust</span>
                  <span class="ml-1 text-gray-500">0.1%</span>
                </li>
                <li class="flex items-center mr-4 mb-2">
                  <div class="w-2 h-2 rounded-full bg-blue-600"></div>
                  <span class="ml-2 font-medium">TypeScript</span>
                  <span class="ml-1 text-gray-500">0.1%</span>
                </li>
                <li class="flex items-center mr-4 mb-2">
                  <div class="w-2 h-2 rounded-full bg-green-500"></div>
                  <span class="ml-2 font-medium">Shell</span>
                  <span class="ml-1 text-gray-500">0.0%</span>
                </li>
              </ul>
            </div>
          </div>
          <!-- end languages -->
        </div>
        <!-- end side-bar -->
      </div>
    </div>
  </body>
</html>
